<template>
	<div class="purchase-item">
		<div class="purchase-item-image">
			<img :src="purchaseItem.pic" alt="">
		</div>
		<div class="purchase-item-detail">
			<p v-html="purchaseItem.name"></p>
			<div class="purchase-item-detail-properties">
				<div v-for="item in purchaseItem.properties" :key="item.id">
					<span>{{item.name}}</span>
					<span v-if="item.childsCurGoods">{{item.childsCurGoods.name}}</span>
				</div>
			</div>
		</div>
		<div class="purchase-item-price">
			<p>{{purchaseItem.price | formatMoney}}</p>
			<p>x{{purchaseItem.count}}</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "purchaseItem",
		props: {
			purchaseItem: {
				type: Object,
				required: true
			}
		}
	}
</script>
